<template>
  <div id="my-carousel">
    <swiper class="swiper-box" :options="swiperOption" ref="mySwiper">
      <swiper-slide class="swiper-slide-box" v-for="(item, index) in hotNews" :key="index">
        <p>{{item.content}}</p>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
  import {swiper, swiperSlide} from 'vue-awesome-swiper'

  export default {
    name: 'my-carousel',
    data () {
      return {
        items: [
          {content: '55555555'},
          {content: '66666666'},
          {content: '77777777'}
        ],
        hotNews: [],
        swiperOption: {
          notNextTick: true,
          autoplay: true,
          // delay: 10000,
          speed: 3000,
          direction: 'vertical',
          effect: 'slide',
          grabCursor: true,
          setWrapperSize: true,
          // followFinger: true,
          // autoHeight: true,
          // paginationType:"bullets",
          pagination: '.swiper-pagination',
          paginationClickable: true,
          prevButton: '.swiper-button-prev',
          nextButton: '.swiper-button-next',
          // scrollbar:'.swiper-scrollbar',
          mousewheelControl: true,
          observer: true,
          observeParents: true
        }
      }
    },
    props: {
      news: {
        type: Array
      }
    },
    created () {
    },
    computed: {
      Swiper () {
        return this.$refs.mySwiper.swiper
      }
    },
    mounted () {
    },
    watch: {
      news (n, o) {
        this.hotNews = n
      }
    },
    methods: {},
    components: {
      swiper,
      swiperSlide
    }
  }
</script>

<style lang="scss" scoped>
  #my-carousel {
    overflow: hidden;
    .swiper-container.swiper-box {
      /*height: 2.1333333rem;*/
      height: 3.2rem;
      color: #000;
      font-size: 0.3466666666666667rem;
      .swiper-wrapper {
        .swiper-slide-box.swiper-slide {
          height: 100%;
          background: #ffffff;
          overflow: hidden;
          p {
            overflow: hidden;
            /*height: 2.1333333rem;*/
            text-align: left;
            line-height: 0.7466666666666667rem;
            height: 100%;
            padding: 0.1066667rem 0.2133333rem;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
          }
        }
      }
    }
    .marquee-content {
      overflow: hidden;
      width: 100%;
      .marquee-list {
        margin: 0;
        /*font-size: 0;*/
        .text {
          white-space: nowrap;
          font-size: 0.32rem;
        }
      }
    }
  }
</style>
